<!--
 * @Author: lixiang
 * @Date: 2021-11-03 16:26:31
 * @Description: 
-->
<template>
  <div>
    <div v-if="!hasChildren(item.children)">
      <el-menu-item index="2" @click="showPageHandler(item.path)">
        <i class="el-icon-menu"></i>
        <span slot="title">{{item.title}}</span>
      </el-menu-item>
    </div>
    <div v-else-if="hasChildren(item.children)">
      <el-submenu index="item。path">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span slot="title">{{item.title}}</span>
        </template>
        <div v-for="(it,index) in item.children" :key="index">
            <el-menu-item index="it.path"  @click="showPageHandler(it.path)">
                <i class="el-icon-menu"></i>
                <span slot="title">{{it.title}}</span>
            </el-menu-item>
        </div>
      </el-submenu>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      items: []
    };
  },
  props: {
    item: {
      type: Object,
      required: true
    },
    basePath: {
      type: String,
      default: ""
    }
  },
  methods: {
    hasChildren(children) {
      window.console.log("子元素个数 - " + children.length);
      if (children.length == 0) {
        return false;
      } else {
        return true;
      }
    },
    showPageHandler(path) {
      window.console.log("跳转的页面 - " + path);
      this.$router.push(path);
    }
  }
};
</script>